<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10 flex jbetween">
      <div>
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          class="fnmb"
        >
          <el-form-item label="班级树形">
            <Selector
              category="班级级联"
              cascader="级联"
              v-model="queryParams.Class"
            ></Selector>
          </el-form-item>
          <el-form-item label="课程树形">
            <Selector
              category="课程级联"
              cascader="级联"
              v-model="queryParams.Course"
            ></Selector>
          </el-form-item>
          <el-form-item label="启止时间">
            <el-date-picker
              v-model="queryParams.StartAndEnd"
              type="daterange"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 212px"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="flex acenter jend fnw">
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="[]"
      :customBtn="[
        { name: '评价课程', rule: { key: 'HasEval', status: false } }
      ]"
      @getList="getList"
      @custom="handleCustom"
  
    >
      <!-- <template v-slot:tabTop>
        <el-button
          type="primary"
          v-hasPermi="['DutyList:add']"
          icon="CirclePlusFilled"
          @click="handleAdd"
          >添加区域</el-button
        >
      </template> -->
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="500"
      @confirm="handleConfirm"
    >
      <el-form
        :model="formData"
        :rules="rules"
        inline
        ref="formRef"
        class="wid100"
      >
        <el-form-item label="评分">
          <el-rate v-model="formData.Score" allow-half />
        </el-form-item>
        <el-form-item label="评语">
          <el-input
            v-model="formData.Comment"
            placeholder="请输入"
            type="textarea"
            clearable
          />
        </el-form-item>
      </el-form>
    </MyDialog>
  </div>
</template>

<script setup name="Evaluation">
import { ref, getCurrentInstance, onMounted } from 'vue';
import {
  GetCourseEvalList_Page,
  EvalCourse,
} from '@/api/attendance/evaluation.js';

const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: '序号' },
  { label: '编号', prop: 'Number', width: 150 },
  { label: '日期', prop: 'DateDay' },
  { label: '起止时间', prop: 'StartAndEnd' },
  { label: '班级', prop: 'Name_Class' },
  { label: '场地', prop: 'Name_Place' },
  { label: '课程', prop: 'Name_Course' },
  { label: '是否已评价', prop: 'HasEvalName' },
  { label: '操作', width: 160 }
]);

proxy.$formatKey(columns.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10
});

const searchStatus = ref(true);
const queryParams = ref({
  StartAndEnd: [],
  NoPage: '' //如果传"true"，则返回全部数据不分页
});
const queryRef = ref();
const show = ref(false);
const title = ref();
const formRef = ref();
const rules = ref({
  Code: [{ required: true, message: '请输入', trigger: 'blur' }],
  Name: [{ required: true, message: '请输入', trigger: 'blur' }],
  Principal: [{ required: true, message: '请选择', trigger: 'change' }]
});
const formData = ref({});

onMounted(() => {
  getList();
});

async function getList() {
  try {
    let query = {
      ...queryParams.value,
      StartTime: queryParams.value.StartAndEnd?.[0],
      EndTime: queryParams.value.StartAndEnd?.[1],
      StartAndEnd: undefined,
      ...page.value
    };
    let res = await GetCourseEvalList_Page(query);
    res.data.List?.forEach(item => {
      item.StartAndEnd =
        item.StartTime?.slice(11, 16) + ' -- ' + item.EndTime?.slice(11, 16);
      item.DateDay = item.DateDay?.slice(0, 10);
      item.HasEvalName = item.HasEval ? '是' : '否';
    });
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}


async function handleConfirm(val) {
  if (val) {
    try {
      await EvalCourse(formData.value);
      proxy.$modal.msgSuccess('评价成功');
      show.value = false;
      getList();
    } catch (error) {
      console.log(error);
    }
  }
}

function handleCustom(row) {
  formData.value = {
    ID_Schedule: row.ID,
    Score: 5,
    Comment: ''
  };
  title.value = '课程评价';
  show.value = true;
}

function handleEdit(row) {
  title.value = '修改';
  show.value = true;
}
async function handleDelete(row) {}
function handleAdd() {
  show.value = true;
  title.value = '添加区域';
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    StartAndEnd: [],
    NoPage: ''
  };
  handleQuery();
}
</script>

<style lang="scss" scoped>
:deep(.el-rate__item) {
  display: flex;
}
</style>
